<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>K线</title>
    <link rel="stylesheet" href="/static/index/lib/weui.min.css">
    <link rel="stylesheet" href="/static/index/css/jquery-weui.css">
    <link rel="stylesheet" href="/static/index/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/index/css/kline.css"/>
    <style>
        .weui-popup__container {
            z-index: 9999 !important;  /* 确保高于 ECharts 的容器 */
        }
        .weui-popup__modal {
            z-index: 10000 !important; /* 确保模态框在最顶层 */
            position: fixed !important;  /* 确保模态框脱离文档流 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #main {
            z-index: 1 !important;  /* 让 K 线图保持在普通层级 */
            position: relative;    /* 确保 z-index 生效 */
        }


    </style>
</head>

<body>
<div id="app">
    <div class="head">
        <div class="price">
            <span class="price-label">105559.9900</span>
            <span class="price-value">≈ 105559.9900</span>
        </div>
        <div class="head-item">
            <div class="head-item-cell">
                <span class="hic-label">涨跌幅</span>
                <span class="hic-value" class="price-red">-0.01%</span>
            </div>
            <div class="head-item-cell">
                <span class="hic-label">高</span>
                <span class="hic-value">15</span>
            </div>
        </div>
        <div class="head-item">
            <div class="head-item-cell">
                <span class="hic-label">24H</span>
                <span class="hic-value">25</span>
            </div>
            <div class="head-item-cell">
                <span class="hic-label">低</span>
                <span class="hic-value">32</span>
            </div>
        </div>
    </div>
    <div class="tabs">
        <div  class="tabs-item">
            <span class="tabs-item-text" class="tabs-item-text-active">分时</span>
            <div class="tabs-item-bar" class="tabs-item-bar-active"></div>
        </div>
        <div  class="tabs-item">
            <span class="tabs-item-text" >1m</span>
            <div class="tabs-item-bar"></div>
        </div>
        <div  class="tabs-item">
            <span class="tabs-item-text" >5M</span>
            <div class="tabs-item-bar"></div>
        </div>
        <div  class="tabs-item">
            <span class="tabs-item-text" >15M</span>
            <div class="tabs-item-bar"></div>
        </div>
        <div  class="tabs-item">
            <span class="tabs-item-text" >30M</span>
            <div class="tabs-item-bar"></div>
        </div>
        <div  class="tabs-item">
            <span class="tabs-item-text" >1H</span>
            <div class="tabs-item-bar"></div>
        </div>
        <div  class="tabs-item">
            <span class="tabs-item-text" >1d</span>
            <div class="tabs-item-bar"></div>
        </div>
    </div>
    <div class="charts-border">
        <div id="main" class="charts"></div>
    </div>
    <div style="height:40px"></div>
    <div class="btns">
        <div @click="back" class="btn btn-green">买入</div>
        <div @click="back" class="btn btn-red">卖出</div>
    </div>
</div>
<div class="weui-popup__container" id="confirm_box">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal" style="max-height:80vh;overflow-y:auto;">
        <!-- 标题栏 -->
        <div class="weui-popup__hd">
            <h2 class="weui-popup__title">确认订单</h2>
            <a href="javascript:;" class="weui-popup__close">
                <i class="weui-icon-close"></i>
            </a>
        </div>

        <!-- 内容区 -->
        <div class="weui-popup__bd">
            <!-- 订单类型 -->
            <div class="weui-cells__title">订单类型</div>
            <div class="weui-flex">
                <div class="weui-flex__item">
                    <div class="weui-grid js_grid" onclick="xztime(1,5,7);">
                        <div class="weui-grid__label">到期时间</div>
                        <div class="weui-grid__label">5分钟</div>
                        <div class="weui-grid__label" style="color:#f5465c;">收益率7%</div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="weui-grid js_grid" onclick="xztime(2,10,12);">
                        <div class="weui-grid__label">到期时间</div>
                        <div class="weui-grid__label">10分钟</div>
                        <div class="weui-grid__label" style="color:#f5465c;">收益率12%</div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="weui-grid js_grid weui-grid_active" onclick="xztime(3,15,15);">
                        <div class="weui-grid__label">到期时间</div>
                        <div class="weui-grid__label">15分钟</div>
                        <div class="weui-grid__label" style="color:#f5465c;">收益率15%</div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="weui-grid js_grid" onclick="xztime(4,20,18);">
                        <div class="weui-grid__label">到期时间</div>
                        <div class="weui-grid__label">20分钟</div>
                        <div class="weui-grid__label" style="color:#f5465c;">收益率18%</div>
                    </div>
                </div>
            </div>

            <!-- 投资金额 -->
            <div class="weui-cells__title">选择投资金额</div>
            <div class="weui-flex">
                <div class="weui-flex__item">
                    <div class="weui-grid js_grid weui-grid_active" onclick="xztzed(1,500);">
                        <div class="weui-grid__label">500 USDT</div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="weui-grid js_grid" onclick="xztzed(2,1000);">
                        <div class="weui-grid__label">1000 USDT</div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="weui-grid js_grid" onclick="xztzed(3,2000);">
                        <div class="weui-grid__label">2000 USDT</div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="weui-grid js_grid" onclick="xztzed(4,3000);">
                        <div class="weui-grid__label">3000 USDT</div>
                    </div>
                </div>
            </div>

            <!-- 自定义金额 -->
            <div class="weui-cells__title">自定义金额</div>
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="number" id="tzmoney" onblur="settzmoney();" placeholder="请输入金额">
                    </div>
                    <div class="weui-cell__ft">
                        <span class="weui-label">USDT</span>
                    </div>
                </div>
            </div>

            <!-- 账户信息 -->
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">账户余额</div>
                    <div class="weui-cell__ft">0.00000000 USDT</div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">体验金</div>
                    <div class="weui-cell__ft">0.00000000 USDT</div>
                </div>
            </div>

            <!-- 订单摘要 -->
            <div class="weui-panel">
                <div class="weui-panel__hd">订单摘要</div>
                <div class="weui-panel__bd">
                    <div class="weui-media-box weui-media-box_text">
                        <div class="weui-flex">
                            <div class="weui-flex__item">
                                <p class="weui-media-box__desc">交易对</p>
                                <p class="weui-media-box__desc">BTC/USDT</p>
                            </div>
                            <div class="weui-flex__item">
                                <p class="weui-media-box__desc">方向</p>
                                <p class="weui-media-box__desc" style="color:#0ECB81;">买涨</p>
                            </div>
                            <div class="weui-flex__item">
                                <p class="weui-media-box__desc">现价</p>
                                <p class="weui-media-box__desc" style="color:#f5465c;" id="ordernewprice"></p>
                            </div>
                            <div class="weui-flex__item">
                                <p class="weui-media-box__desc">金额</p>
                                <p class="weui-media-box__desc"><span id="ttzed">500</span> USDT</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 隐藏字段 -->
            <input type="hidden" id="ctime" value="15">
            <input type="hidden" id="ctzed" value="500">
            <input type="hidden" id="ccoinname" value="BTC/USDT">
            <input type="hidden" id="ctzfx" value="1">
            <input type="hidden" id="cykbl" value="15">
            <input type="hidden" id="hymin" value="">
            <input type="hidden" id="flag" value="1">
        </div>

        <!-- 底部按钮 -->
        <div class="weui-popup__ft">
            <a href="javascript:;" class="weui-btn weui-btn_primary" id="subbtn">确认下单</a>
        </div>
    </div>
</div>
<script src="/static/index/lib/jquery-2.1.4.js"></script>
<script src="/static/index/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<script src="/static/index/js/jquery-weui.js"></script>
<script src="/static/index/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/index/js/tmpData.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/index/js/k-line.js" type="text/javascript" charset="utf-8"></script>
<script>

    /*    var mChart = echarts.init(document.getElementById('m-line'));
        mChart.setOption(initMOption(mdata,'us'));*/
    var kChart = echarts.init(document.getElementById('main'), null, {
        renderer: 'svg'  // 强制使用 SVG 渲染
    });
    kChart.setOption(initKOption(kdata));
</script>
</body>
</html>
